<!-- 业务-预算执行明细 费用 -->
<template>
  <div class="expense-box flex">
    <div class="expense-left p-8 mr-8">
      <TableNew class="h-full" :data="tableLeft" :columns="tableLeftColumns" :hide-pagination="true" />
    </div>

    <div class="expense-right flex-1 overflow-hidden p-8">
      <TableNew
        class="h-full"
        :loading="tableLoading"
        :data="tableData"
        :columns="getTableEl"
        :pagination="pagination"
        @paginationChange="paginationChange"
      >
        <template #yard="{ row }">
          <div class="relative truncate">
            {{ row.yard | yardName }}
          </div>
        </template>

        <template #actionOther="{ row }">
          <el-button type="text" @click="appealFun(row)">申诉</el-button>
        </template>
      </TableNew>
    </div>

    <Dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :footer-btns="footerBtns"
      @submit="dialogSubmit"
      @cancel="dialogCancel"
    >
      <el-form>
        <el-form v-if="this.currentType === 'expense'" ref="dialogSelectForm" :model="dialogSelect" label-width="110px" class="demo-ruleForm">
          <el-form-item label="预算科目名称:">{{ dialogSelect.subjectName }}</el-form-item>
          <el-form-item label="预算科目编码:">{{ dialogSelect.subjectCode }}</el-form-item>
          <el-form-item label="日期:">{{ dialogSelect.dtime }}</el-form-item>
          <el-form-item label="部门编码:">{{ dialogSelect.deptCode }}</el-form-item>
          <el-form-item label="部门名称:">{{ dialogSelect.deptName }}</el-form-item>
          <el-form-item label="摘要:">{{ dialogSelect.description }}</el-form-item>
          <el-form-item label="金额(元):">{{ formatMoney(dialogSelect.amount) }}</el-form-item>
          <el-form-item label="院区:">{{ dialogSelect.yard | yardName }}</el-form-item>
          <el-form-item label="申诉理由:" prop="memo" :rules="[{ required: true, message: ',', trigger: 'blur' },]">
            <el-input v-model="dialogSelect.memo" type="textarea" placeholder="请输入申诉理由" />
          </el-form-item>
          <el-form-item label="上传附件:" class="dialog-up-file">
            <el-upload
              class="inline-block"
              action=""
              :auto-upload="false"
              :on-change="fileChange"
              :on-remove="remove"
              multiple
              :file-list="fileList"
            >
              <el-button icon="el-icon-upload2" size="mini" :loading="importLoading">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form v-else ref="dialogSelectForm" :model="dialogSelect" label-width="110px" class="demo-ruleForm">
          <el-form-item label="预算科目名称:">{{ dialogSelect.subjectName }}</el-form-item>
          <el-form-item label="预算科目编码:">{{ dialogSelect.subjectCode }}</el-form-item>
          <el-form-item label="固定资产编码:">{{ dialogSelect.assetNum }}</el-form-item>
          <el-form-item label="固定资产名称:">{{ dialogSelect.assetName }}</el-form-item>
          <el-form-item label="部门编码:">{{ dialogSelect.deptCode }}</el-form-item>
          <el-form-item label="部门名称:">{{ dialogSelect.deptName }}</el-form-item>
          <el-form-item label="原值:">{{ formatMoney(dialogSelect.originalValue) }}</el-form-item>
          <el-form-item label="开始使用日期:">{{ dialogSelect.useStartDate }}</el-form-item>
          <el-form-item label="存放地点:">{{ dialogSelect.site }}</el-form-item>
          <el-form-item label="使用人:">{{ dialogSelect.operator }}</el-form-item>
          <el-form-item label="院区:">{{ dialogSelect.yard | yardName }}</el-form-item>
          <el-form-item label="申诉理由:" prop="memo" :rules="[{ required: true, message: ',', trigger: 'blur' }]">
            <el-input v-model="dialogSelect.memo" type="textarea" placeholder="请输入申诉理由" />
          </el-form-item>
          <el-form-item label="上传附件:" class="dialog-up-file">
            <el-upload
              class="inline-block"
              action=""
              :auto-upload="false"
              :on-change="fileChange"
              :on-remove="remove"
              multiple
              :file-list="fileList"
            >
              <el-button icon="el-icon-upload2" size='mini' :loading="importLoading">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
import listMixins from '@/mixins/budgetQuert/listMixins'
import {
  getAssetsObj,
  getObj,
  listAssetsInfo,
  listBudgetInfo,
  ysAccountDetailAdd,
  ysBusinessAssetDetailAdd
} from '@/api/budgetQuert'
import mixins from '@/pages/budgetQuert/BusinessExecute/mixins'
import upFileMixins from '@/mixins/budgetQuert/upFileMixins'

export default {
  name: 'Expense',
  filters: {
    yardName(val) {
      let name = ''

      switch (val) {
        case 1:
          name = '三香'
          break
        case 2:
          name = '浒关'
          break
      }

      return name
    }
  },
  mixins: [listMixins, mixins, upFileMixins],
  props: {
    currentType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listInterface: listBudgetInfo,
      appealInfo: getObj,
      appealAdd: ysAccountDetailAdd,

      reconstruction: true,

      tableLeftColumns: [
        {
          title: '费用名称',
          dataIndex: 'subjectName'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          format: true,
          align: 'right'
        }
      ],
      tableLeft: [],
      tableEl: [
        {
          title: '编号',
          dataIndex: 'num'
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 120
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode',
          width: 120
        },
        {
          title: '日期',
          dataIndex: 'dtime'
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode'
        },
        {
          title: '部门名称',
          dataIndex: 'deptName',
          width: 100
        },
        {
          title: '摘要',
          dataIndex: 'description',
          width: 200
        },
        {
          title: '金额（元）',
          dataIndex: 'amount',
          width: 90,
          format: true,
          align: 'right'
        },
        {
          title: '院区',
          dataIndex: 'yard',
          type: 'otherTag'
        },
        {
          title: '操作',
          dataIndex: 'actionOther',
          type: 'otherTag',
          fixed: 'right',
          width: 50
        }
      ],
      otherEl: [
        {
          title: '用友编号',
          dataIndex: 'num'
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 120
        },
        {
          title: '固定资产名称',
          dataIndex: 'assetName',
          width: 120
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode'
        },
        {
          title: '部门名称',
          dataIndex: 'deptName',
          width: 100
        },
        {
          title: '原值',
          dataIndex: 'originalValue',
          format: true,
          align: 'right'
        },
        {
          title: '开始使用日期',
          dataIndex: 'useStartDate',
          width: 120
        },
        {
          title: '存放地点',
          dataIndex: 'site'
        },
        {
          title: '使用人',
          dataIndex: 'operator'
        },
        {
          title: '院区',
          dataIndex: 'yard',
          type: 'otherTag'
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode',
          width: 120
        },
        {
          title: '固定资产编码',
          dataIndex: 'assetNum',
          width: 120
        },
        {
          title: '操作',
          dataIndex: 'actionOther',
          type: 'otherTag',
          fixed: 'right',
          width: 50
        }
      ],
      columns: [
        {
          title: '用友编号',
          dataIndex: 'num'
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 120
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode',
          width: 120
        },
        {
          title: '固定资产编码',
          dataIndex: 'assetNum',
          width: 120
        },
        {
          title: '固定资产名称',
          dataIndex: 'assetName',
          width: 120
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode'
        },
        {
          title: '部门名称',
          dataIndex: 'deptName',
          width: 100
        },
        {
          title: '原值',
          dataIndex: 'originalValue',
          format: true,
          align: 'right'
        },
        {
          title: '开始使用日期',
          dataIndex: 'useStartDate',
          width: 120
        },
        {
          title: '存放地点',
          dataIndex: 'site'
        },
        {
          title: '使用人',
          dataIndex: 'operator'
        },
        {
          title: '院区',
          dataIndex: 'yard',
          type: 'otherTag'
        },
        {
          title: '操作',
          dataIndex: 'actionOther',
          type: 'otherTag',
          fixed: 'right',
          width: 50
        }
      ],
      tableData: []
    }
  },
  computed: {
    getTableEl() {
      if (this.currentType === 'expense') {
        return this.tableEl
      } else {
        return this.otherEl
      }
    }
  },
  created() {
    switch (this.currentType) {
      case 'expense':
        this.listInterface = listBudgetInfo
        this.appealInfo = getObj
        this.appealAdd = ysAccountDetailAdd
        break
      case 'assets':
        this.listInterface = listAssetsInfo
        this.appealInfo = getAssetsObj
        this.appealAdd = ysBusinessAssetDetailAdd
        break
    }
  },
  methods: {
    dataReconstruction(res) {
      if (res.data.expenseVOList && res.data.expenseVOList.length) {
        res.data.expenseVOList.sort(function(obj1, obj2) {
          const val1 = obj1.sort
          const val2 = obj2.sort
          if (val1 < val2) {
            return -1
          } else if (val1 > val2) {
            return 1
          } else {
            return 0
          }
        })

        this.tableLeft = res.data.expenseVOList
      }

      this.tableData = res.data.pageInfo.list
      this.pagination.total = res.data.pageInfo.total
    }
  }
}
</script>

<style lang='less' scoped>
.expense-left {
  width: 260px;
}

.expense-left,
.expense-right {
  background-color: #FFFFFF;

  .el-button {
    padding: 0;
    font-size: 12px;
  }
}

.expense-left {
  min-width: 180px;
}
</style>

<style lang='less'>
.expense-box {
  .ck-dialog .ck-dialog-container {
    top: 0 !important;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
